<template>
	<view class="page">
		<view class="p-title">
			<view class="flex-row justify-between section">
				<text class="font_1">车牌号</text>
				<text class="font_1">{{ car_chepai }}</text>
			</view>
		</view>
		<view class="p-upitem">
			<view class="flex-row justify-between items-center section_2">
				<view class="group_4">
					<text class="font_2">驾驶人身份证</text>
					<text class="font_2">正面</text>
				</view>
				<image class="image_4" mode="aspectFill" :src="idcardZ ? idcardZ : '/static/id-z.png'" @click="uploadImg('idcardZ')" />
			</view>
		</view>
		<view class="p-upitem">
			<view class="flex-row justify-between items-center section_2">
				<view class="group_4">
					<text class="font_2">驾驶人身份证</text>
					<text class="font_2">反面</text>
				</view>
				<image class="image_4" mode="aspectFill" :src="idcardF ? idcardF : '/static/id-f.png'" @click="uploadImg('idcardF')"  />
			</view>
		</view>
		<view class="p-upitem">
			<view class="flex-row justify-between items-center section_2">
				<view class="group_4">
					<text class="font_2">驾驶人驾驶证</text>
					<text class="font_2">正面</text>
				</view>
				<image class="image_4" mode="aspectFill" :src="driverZ ? driverZ : '/static/driver-z.png'" @click="uploadImg('driverZ')" />
			</view>
		</view>
		<view class="p-upitem">
			<view class="flex-row justify-between items-center section_2">
				<view class="group_4">
					<text class="font_2">驾驶人驾驶证</text>
					<text class="font_2">副面</text>
				</view>
				<image class="image_4" mode="aspectFill" :src="driverF ? driverF : '/static/driver-f.png'" @click="uploadImg('driverF')" />
			</view>
		</view>
		<view class="p-upitem">
			<view class="flex-row justify-between items-center section_2">
				<view class="group_5 flex-col align-center">
					<text class="font_2">里程油表</text>
					<text class="txt">请拍照记录车辆仪表盘</text>
					<text class="txt">取车时里程和油表信息</text>
				</view>
				<image class="image_4" mode="aspectFill" :src="get_yibiao_images ? get_yibiao_images : '/static/car-li.png'"  @click="uploadImg('get_yibiao_images')" />
			</view>
		</view>
		<view class="p-upitem">
			<view class="flex-row justify-between items-center section_2">
				<view class="group_5 flex-col align-center" style="margin-left:-48rpx;">
					<text class="font_2">验车视频</text>
					<text class="txt tips">请绕车一周并确保拍摄清晰</text>
					<text class="txt tips">若由于拍摄不清晰无法定责</text>
					<text class="txt tips">相应损失由租车公司自行承担</text>
				</view>
				<image class="image_4" mode="aspectFill" src="/static/car-video.png"  @click="uploadVideo" v-if="!get_carvideo" />
				<view v-else class="video-wrap">
					<video class="image_4" :src="get_carvideo" />
					<image class="upload-del-btn"
						@click="delVideo" 
						src="" 
						mode="scaleToFill">
					</image>
				</view>
			</view>
		</view>
		<submit-btn @submit="submit" ref="submitRef">
			<template v-slot:btns="{ isSubmitted }">
				<view class="p-btn" :class="{ disabled: isSubmitted }">确认客户取车</view>
			</template>
		</submit-btn>
	</view>
</template>

<script lang="ts">
import {
	reactive,
	toRefs,
	defineComponent,
	ref
	// watchEffect,
} from 'vue';
import { onLoad } from '@dcloudio/uni-app';
// import uploadImages from '@/components/upload-images.vue';
// import {uploadVideo} from './js/uploadVideo.js'
const apply = defineComponent({
	components: {
	},
	props: {},
	// methods:{
	// 	uploadVideo
	// },
	setup(props: any, ctx: any) {
		const data = reactive({
			orderid: '',
			car_chepai: '',
			
			idcardZ: '',
			idcardF: '',
			driverZ: '',
			driverF: '',
			get_yibiao_images: '',
			get_carvideo: ''
		});
		onLoad(e => {
			data.orderid = e.orderid;
			data.car_chepai = e.car_chepai;
		});
		const uploadImg = async key => {
			const fullurl = await uni.$tools.uploadImg();
			data[key] = fullurl;
		};
		const uploadVideo = async (formData={}) =>{
			const fullurl = await uni.$tools.uploadVideo();
			// const fullurl = await uni.$tools.appUploadVideo();
			data.get_carvideo = fullurl;
			// console.log("data.get_carvideo===",data.get_carvideo)
		}
		const delVideo = ()=>{
			data.get_carvideo = '';
		}
		const submitRef = ref();
		const submit = async () => {
			if(! uni.$tools.match( data.idcardZ,'nonull','请上传驾驶人身份证正面照')){
			    return;
			}
			if(! uni.$tools.match( data.idcardF,'nonull','请上传驾驶人身份证反面照')){
			    return;
			}
			
			if(! uni.$tools.match( data.driverZ,'nonull','请上传驾驶人驾驶证正面照')){
			    return;
			}
			if(! uni.$tools.match( data.driverF,'nonull','请上传驾驶人驾驶证副面照')){
			    return;
			}
			
			if(! uni.$tools.match( data.get_yibiao_images,'nonull','请拍照记录车辆仪表盘')){
			    return;
			}
			if(! uni.$tools.match( data.get_carvideo,'nonull','请上传验车视频')){
			    return;
			}
			const idcard_images = data.idcardZ+','+data.idcardF;
			const driver_images = data.driverZ+','+data.driverF;
			
			const sendData={
				id: data.orderid,
				idcard_images,
				driver_images,
				get_yibiao_images: data.get_yibiao_images,
				get_carvideo: data.get_carvideo,
			}
			let res = await uni.$request('order.get_car',sendData);
			submitRef.value.chgeStatus();
			uni.$tools.msg(res.msg);
			setTimeout(()=>{
				uni.$this.goBack();
			},800)
		};
		return {
			...toRefs(data),
			uploadImg,
			uploadVideo,
			delVideo,
			submitRef,
			submit,
		};
	}
});
export default apply;
</script>

<style lang="scss">
page {
	background-color: #f7f7f7;
}
.page {
	padding-bottom: 30rpx;
}
.video-wrap{
	position: relative;
	.upload-del-btn{
		position: absolute;
		top: -20rpx;
		right: -20rpx;
		z-index: 2;
		width: 36rpx;
		height: 36rpx;
	}
}
.p-title {
	margin-bottom: 24rpx;
	.section {
		padding: 30rpx 25rpx 30rpx 32rpx;
		background-color: #ffffff;
		.font_1 {
			font-size: 30rpx;
			font-family: PingFang;
			color: #333333;
		}
	}
}
.p-upitem {
	padding: 0 30rpx;
	.section_2 {
		padding: 40rpx 39rpx 40rpx 74rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		margin: 0 auto 24rpx;
		.group_4 {
			width: 180rpx;
			white-space: normal;
			word-break: break-all;
			text-align: center;
			.font_2 {
				line-height: 37rpx;
				font-size: 28rpx;
				font-family: PingFang;
				line-height: 37rpx;
				color: #333333;
			}
		}
		.group_5 {
			margin-left: -30rpx;
			.font_2 {
				line-height: 37rpx;
				font-size: 28rpx;
				font-family: PingFang;
				line-height: 37rpx;
				color: #333333;
			}
			.txt {
				width: 285rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #a6a6a6;
				line-height: 32rpx;
			}
			.tips {
				width: 288rpx;
			}
		}
		.image_4 {
			width: 313rpx;
			height: 201rpx;
			border-radius: 10rpx;
		}
	}
}
.p-btn {
	margin: 10rpx auto 0;
	width: 670rpx;
	height: 84rpx;
	background: #256ae5;
	border-radius: 84rpx;
	line-height: 84rpx;
	text-align: center;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #ffffff;
	&.disabled {
		background-color: #eee;
	}
}
</style>
